<script setup>
import {computed} from "vue";
import {formsOutCssMapping} from "@/components/constants";
import {Close} from "@element-plus/icons-vue";
import CommonTagDisplay from "@/components/WordFormedTag/CommonTagDisplay.vue";

const theProps = defineProps(["label","theForm"]);

const styleObject = computed(() =>{
    // let formPart = theProps.label.substring(0,theProps.label.lastIndexOf('.'));
    let theForm = formsOutCssMapping[theProps.theForm];
    return {"--color-formOut-default":`var(--color-`+theForm+`)`,
        "--color-formOut-default-bg-color":`var(--color-`+theForm+`-bg-color)`}
})
</script>

<template>
    <el-tag class="batch-over-write-tag" :style="styleObject">
        <CommonTagDisplay :label="label" />
    </el-tag>
</template>



<style scoped>
.el-tag.batch-over-write-tag {
    font-weight: 600;
    --el-font-size-base: 12px;
    line-height: 8px;
    height: var(--common-tag-height);
    padding: 7px 7px;
    margin: 3px;
    border-width: 1.5px;
    --el-tag-border-radius: 3px;
    --el-tag-bg-color: var(--color-formOut-default-bg-color);
    --el-tag-border-color: var(--color-formOut-default);
    --el-tag-hover-color: var(--color-formOut-default);
    --el-tag-text-color: var(--color-formOut-default);
    color: var(--color-formOut-default);
    border-style: solid;
    border-color: var(--color-formOut-default);
//background-color: var(--color-nounsOut-bg-color-editing); background-color: var(--color-formOut-default-bg-color);
}
</style>